iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 27

30 天 CSS 隨手筆記 - 第 27 天 - backgrounds & borders Lv4

  • 分享至 

  • xImage
  •  

編輯中,僅請見諒 m(_ _)m


background-clip

background 的範圍~

預設值:border-box
允許的值:border-box / padding-box / content-box / text

比較特別的是 text 的效果:

本來的效果是這樣的:https://jsfiddle.net/lazy_shyu/kL22r25p/1/

但把文字設成透明、再把 background-clip: text 後,就可以看到很有趣的效果~
( 但目前還需要加上 prefix "-webkit-background-clip" )

https://jsfiddle.net/lazy_shyu/kL22r25p/2/

btw 也可以設定多個背景~

https://jsfiddle.net/lazy_shyu/kL22r25p/3/


corner-shape

corners ( shorthand )

border-limit

border-clip


上一篇
30 天 CSS 隨手筆記 - 第 26 天 - shadow dom 樣式
下一篇
30 天 CSS 隨手筆記 - 第 28 天 - media
系列文
30 天 CSS 隨手筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
JerryHong
iT邦新手 5 級 ‧ 2017-01-12 17:36:53

酷誒!
(( 我還在第 24 篇 QQ

我要留言

立即登入留言